"use client"

import { Button } from "@/components/ui/button"
import { Play } from "lucide-react"
import { formatDuration } from "@/lib/format"
import { Skeleton } from "@/components/ui/skeleton"
import { usePlayer } from "@/contexts/player-context"
import type { Ranking } from "@/types/ranking"
import type { Song } from "@/types"
import Link from "next/link"

interface RankingContentProps {
    ranking: Ranking
    songs: Song[] | null
    isLoading: boolean
}

export function RankingContent({ ranking, songs, isLoading }: RankingContentProps) {
    const { playSong, addToQueue } = usePlayer()

    const handlePlayAll = () => {
        if (songs && songs.length > 0) {
            playSong(songs[0])
            // 将剩余歌曲添加到队列
            songs.slice(1).forEach((song) => {
                addToQueue(song)
            })
        }
    }

    if (isLoading) {
        return (
            <div className="flex-1">
                <div className="flex items-center justify-between mb-6">
                    <Skeleton className="h-8 w-48" />
                    <Skeleton className="h-10 w-24" />
                </div>
                <div className="space-y-2">
                    {Array.from({ length: 10 }).map((_, i) => (
                        <div key={i} className="flex items-center p-2 rounded-md">
                            <Skeleton className="h-6 w-6 mr-4" />
                            <Skeleton className="h-6 flex-1" />
                            <Skeleton className="h-6 w-24 ml-4" />
                            <Skeleton className="h-6 w-16 ml-4" />
                        </div>
                    ))}
                </div>
            </div>
        )
    }

    if (!songs) {
        return (
            <div className="flex-1">
                <div className="text-center p-4">加载中...</div>
            </div>
        )
    }

    return (
        <div className="flex-1">
            <div className="flex items-center justify-between mb-6">
                <h1 className="text-2xl font-bold">{ranking.name}</h1>
                <Button onClick={handlePlayAll} className="flex items-center gap-2">
                    <Play className="h-4 w-4" />
                    播放全部
                </Button>
            </div>

            <div className="text-sm text-muted-foreground mb-4">
                {ranking.description} · {ranking.updateFrequency}
            </div>

            <div className="space-y-1">
                {songs.map((song, index) => (
                    <div key={song.id} className="flex items-center p-2 rounded-md hover:bg-muted group">
                        <div className="w-8 text-center text-muted-foreground">
                            {index + 1}
                            {song.lastRank && song.rank && (
                                <span
                                    className={`ml-1 text-xs ${
                                        song.rank < song.lastRank
                                            ? "text-green-500"
                                            : song.rank > song.lastRank
                                                ? "text-red-500"
                                                : "text-gray-500"
                                    }`}
                                >
                  {song.rank < song.lastRank ? "↑" : song.rank > song.lastRank ? "↓" : "-"}
                </span>
                            )}
                        </div>
                        <div className="flex-1 ml-4">
                            <div className="font-medium">{song.title}</div>
                            <div className="text-sm text-muted-foreground">{song.artists}</div>
                        </div>
                        <div className="text-muted-foreground">
                            {song.album ? (
                                <Link href={`/album/${song.album.id}`} className="hover:underline hover:text-primary transition-colors">
                                    {song.album.title}
                                </Link>
                            ) : (
                                ""
                            )}
                        </div>
                        <div className="w-20 text-right text-muted-foreground">{formatDuration(song.duration)}</div>
                        <div className="w-8 opacity-0 group-hover:opacity-100 transition-opacity">
                            <button onClick={() => playSong(song)} className="text-primary hover:text-primary/80">
                                <Play className="h-4 w-4" />
                            </button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

